<template>
	<view class="content">
		<view class="top">
			<view class="top_cont">
				<image class="userAvatar" :src="users.avatar" mode="aspectFill"></image>
				<view class="userInfo">
					<view class="userName ellipsis">{{users.nickname}}</view>
					<view class="userInter">
						<view class="inter">我的积分：</view>
						<view class="interNum">{{users.integral}}</view>
					</view>
				</view>
				<image class="interDetail" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/interdetail.png" mode="" @click="goInter"></image>
			</view>
		</view>
		<view class="group">
			<view class="group_top">
				<view class="group_list">
					<view class="listItem" v-for="(item,index) in signList" :key="index">
						<view class="rewardTxt">{{item.day}}</view>
						<view :class="['reward',{rewardcurr:users.signNum >= (index + 1)} ]">
							<view class="rewardNum">+{{item.sign_num}}</view>
							<view class="rewarddsc">积分</view>
						</view>
					</view>
				</view>
				<view class="but" @click="gosign">{{users.isDaySign == true ? '已签到' : '签到'}}</view>
				
			</view>
			<view class="group_bottom">
				<view class="bottom_tip">
					<view class="tip">累计签到</view>
					<view class="tipday">{{users.signNum}}天</view>
					<view class="tipdsc">据说连续签到七天可获得超额通宝一定要坚持签到哟～</view>
				</view>
				<view class="bottonlist" v-for="(item,index) in signDetailList" :key="index">
					<view class="bottonlist_fl">
						<view class="intername">{{item.title}}</view>
						<view class="interdate">{{item.addTime}}</view>
					</view>
					<view class="bottonlist_detail">+{{item.number}}积分</view>
				</view>
				<view class="botommore" @click="goInter">点击加载更多</view>
				
				
			</view>
			
			
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				signList:[],
				users:{},
				userInfo:{},
				signDetailList:[]
			}
		},
		onLoad() {
			let that = this;
			uni.$on('login',function(data){
				that.cacheHelper.isLogin()
				that.cacheHelper.updateUserInfo()
				that.getsignUser()
			})
			that.getsignList();
			that.getsignSet();
			that.getsignUser()
		},
		onUnload() {
			uni.$off('login')
		},
		methods: {
			// 明细
			goInter: function () {
				uni.navigateTo({
					url: 'userSignDetail/userSignDetail',
				});
			},
			// 获取签到列表
			getsignList: function () {
				this.api.getUserSign({
					page:1,
					limit:3
				}).then(res => {
					// console.log(res)
					this.signDetailList = res.data;
				})
			},
			// 获取签到配置
			getsignSet: function () {
				this.api.getUserSignSet().then(res => {
					console.log(res)
					this.signList = res.data;
				})
			},
			// 开始签到
			gosign: function () {
				this.api.getSignStar().then(res => {
					console.log(res)
					this.tui.toast(res.msg)
					this.getsignUser();
					this.getsignList();
				})
			},
			// 获取签到用户信息
			getsignUser: function () {
				this.api.getUserSignInfo().then(res => {
					console.log(res,"========")
					this.users = res.data;
					this.userInfo = res.data.yxUserinfo;
				})
			}
			
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		font-size: 30rpx;
		color: #333333;
		background: #F5F5F5;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.top {
		width: 100%;
		box-sizing: border-box;
		background: #E42221;
		height: 350rpx;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		padding: 20rpx 0rpx 0rpx 20rpx;
		.top_cont {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 40rpx;
			color: #FFFFFF;
			position: relative;
			.userAvatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			.userInfo {
				width: calc(100% - 240rpx);
				box-sizing: border-box;
				padding: 0 130rpx 0 10rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				.userInter {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 36rpx;
					.inter {
						font-size: 28rpx;
					}
				}
			}
			.interDetail {
				width: 120rpx;
				height: 59rpx;
				
			}
		} 
		 
	}
	.group {
		width: 100%;
		box-sizing: border-box;
		padding: 225rpx 20rpx 0 20rpx;
		position: relative;
		.group_top {
			width: 710rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			position: absolute;
			top: -170rpx;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 20;
			border-radius: 16rpx;
			padding: 30rpx 15rpx;
			.group_list {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 22rpx;
				color: #333333;
				.listItem {
					text-align: center;
					.reward {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						border: 1rpx solid #E9EAEC;
						margin-top: 34rpx;
						display: flex;
						flex-flow: column;
						justify-content: center;
						text-align: center;
						font-size: 24rpx;
						color: #666666;
						.rewardNum {
							line-height: 34rpx;
							color: #212121;
						}
						.rewarddsc {
							font-size: 20rpx;
						}
					}
					.rewardcurr {
						background: #E42221;
						border: 1rpx solid #E42221;
						color: #FFFFFF;
						.rewardNum {
							color: #FFFFFF;
						}
					}
				}
			}
			.but {
				width: 502rpx;
				box-sizing: border-box;
				background: #E42221;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				border-radius: 47rpx;
				font-size: 30rpx;
				margin: 60rpx auto 30rpx auto;
			}
			
			
			
			
			
		}
	
		.group_bottom {
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			padding: 20rpx 28rpx;
			border-radius: 16rpx;
			
			.bottom_tip {
				width: 100%;
				box-sizing: border-box;
				padding-bottom: 40rpx;
				border-bottom: 2rpx solid #F5F5F5;
				.tip {
					width: 100%;
					box-sizing: border-box;
					text-align: center;
					font-size: 24rpx;
				}
				.tipday {
					width: 100%;
					box-sizing: border-box;
					font-size: 70rpx;
					color: #E42221;
					text-align: center;
					line-height: 100rpx;
				}
				.tipdsc {
					width: 470rpx;
					box-sizing: border-box;
					margin: 0 auto 10rpx auto;
					text-align: center;
					line-height: 42rpx;
				}
				
			}
			
			
		}
		.bottonlist {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx 0;
			border-bottom: 2rpx solid #F5F5F5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.bottonlist_detail {
				font-size: 30rpx;
				color: #E42221;
			}
			.intername {
				line-height: 46rpx;
			}
			.interdate {
				font-size: 24rpx;
				color: #999999;
			}
			
		}
		.botommore {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 30rpx;
			color: #999999;
			line-height: 90rpx;
		}
		
	
	
	}

</style>
